<template name="loadMore">
	<view class="display loadmore" :hidden='!showThis' @click='clickLoadMore'>
	    <image class="icon" :class="[showIcon?'active':'']" src='/static/images/icon/loading.png' :hidden='!showIcon'/>
	    <text>{{text}}</text>
	</view>
</template>
 
<script>
	export default {
		name: "loadMore",
		data(){
			return {
				showThis: false,
				text: '',
				showIcon: false,
				isLoading: false,
				hasMore: false,
				loadingText: '加载中',
				failText: '加载失败，请点击重试',
				finishText: '到底了',
				listRenderingDelay: 500
			}
		},
		methods: {
		    //加载更多的入口方法, 直接在page中使用时请在onReachBottom() 方法中调用这个方法, 并实现loadMoreListener方法去获取数据
		    loadMore: function() {
				if(!this.hasMore){
					console.log('load more finish')
					return
				}
				if(this.isLoading) {
					console.log('loading ...')
					return
				}
				this.isLoading = true
				this.$emit('loadMoreListener')
		    },
		
		    //加载完成, 传入hasMore
		    loadMoreComplete: function(data,type) {
				if(data.list.length!=0){
						this.hasMore = data.ok!=0?true:false
					if (this.hasMore) {
						this.showIcon = true
						this.text = this.loadingText
					} else {
						this.showIcon = false
						this.text = this.finishText
					}
					this.showThis = true
				}else{
					var text = ''
					switch (type) {
						case 'goods':
							text = '暂无商品'
							break;
						case 'order':
							text = '暂无订单'
							break;
						case 'evaluation':
							text = '暂无评论'
							break;
						case 'collect':
							text = '暂无收藏'
							break;
						case 'integral':
							text = '暂无积分'
							break;
						case 'record':
							text = '暂无记录'
							break;
					}
					this.hasMore = false,
					this.text = text,
					this.showIcon = false,
					this.showThis = true
				}
				//界面渲染延迟, 避免列表还未渲染完成就再次触发 loadMore 方法
				setTimeout(function(){
					this.isLoading = false
				}.bind(this), this.listRenderingDelay)
		    },
		
		    // 加载失败
		    loadMoreFail: function() {
				this.showIcon = false,
				this.text = this.failText
				//界面渲染延迟, 避免列表还未渲染完成就再次触发 loadMore 方法
				setTimeout(function(){
					this.isLoading = false
				}.bind(this), this.listRenderingDelay)
		    },
		
		    //点击 loadmore 控件时触发, 只有加载失败时才会进入页面回调方法
		    clickLoadMore: function() {
				if(this.text != this.failText) return
				this.showIcon = true,
				this.text = this.properties.loadingText,
				this.isLoading = true
				this.$emit('clickLoadMore')
		    }
		  }
	}
</script>
 
<style lang="scss">
	.loadmore {
		@include widthHeight(100%,70rpx);
	    @include flex-align-justify;
		text{
			@include font($fontSize - 4rpx,$greyColor);
			font-weight: bold;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			letter-spacing: 5rpx;
		}
		.icon{
			@include widthHeight(28rpx);
			@include margin(20rpx,'right');
		}
	}
	  
	.active {
		animation: weuiLoading 0.6s steps(12, end) infinite;
	}

	@keyframes weuiLoading {
		0% {
			transform: rotate3d(0, 0, 1, 0deg);
		}

		100% {
			transform: rotate3d(0, 0, 1, 360deg);
		}
	}
</style>